<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="sf" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="s" uri="http://www.springframework.org/tags" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RRA</title>

        <link rel="stylesheet" type="text/css"
              href="${pageContext.request.contextPath}/resources/css/redmond/jquery-ui-1.8.23.custom.css" />
        <link rel="shortcut icon" type="image/x-icon" href="${pageContext.request.contextPath}/resources/images/favicon.ico"/>

        <link href="${pageContext.request.contextPath}/resources/css/style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery.js"></script>
        <script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/jquery-ui-1.8.22.custom.min.js"></script>

        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/styles.css" />
        
        <script type="text/javascript">
            
            $(document).ready(function(){                                           
                
                $("#signInFormDiv").click(function(){                    
                    
                    function updateTips( t ) {
                        tips
                        .text( t )
                        .addClass( "ui-state-highlight" );
                        setTimeout(function() {
                            tips.removeClass( "ui-state-highlight", 1500 );
                        }, 500 );
                    }
                                
                    function checkLength( o, n, min, max ) {
                        if ( o.val().length > max || o.val().length < min ) {
                            o.addClass( "ui-state-error" );
                            updateTips( "Length of " + n + " must be between " +
                                min + " and " + max + "." );
                            return false;
                        } else {
                            return true;
                        }
                    }

                    function checkRegexp( o, regexp, n ) {
                        if ( !( regexp.test( o.val() ) ) ) {
                            o.addClass( "ui-state-error" );
                            updateTips( n );
                            return false;
                        }
                        else {
                            return true;
                        }
                    }
                    
                    var $dialog = $("#signInForm"); 
		
                    $( "#dialog:ui-dialog" ).dialog( "destroy" );
		
                    var name = $( "#name" ),			
                    password = $( "#password" ),
                    allFields = $( [] ).add( name ).add( password ),
                    tips = $( ".validateTips" );

       
		
                    $dialog.css('display','block');
                    $dialog.dialog({
                        title: "Sign In",
                        position: "center",
                        height: 350,
                        width: 450,
                        modal: true,
                        zIndex: 500,
                        resizable: false,
                        buttons: {
                            "Sign In": function() {
                                
                                var bValid = true;
                                allFields.removeClass( "ui-state-error" );

                                bValid = bValid && checkLength( name, "username", 3, 20 );					
                                bValid = bValid && checkLength( password, "password", 3, 20 );

                                bValid = bValid && checkRegexp( name, /^[A-Za-z0-9_]{3,20}$/, "Username may consist of a-z, 0-9." );                             
					
                                bValid = bValid && checkRegexp( password, /^[A-Za-z0-9!@#$%^&*()_]{3,20}$/, "Password may consist of a-z, 0-9 and special characters." );

                                if (bValid) { 
                                    $('#appHome_Ajax_Loading').show();
                                    $.ajax({
                                        type : "POST",
                                        url : "${pageContext.request.contextPath}/sign-in",
                                        data : $("#signForm").serialize(),
                                        success : function(response) {
                                            res = response;
							
                                            $("#status").ajaxComplete(function(event,request,settings) {
								
                                                $('#appHome_Ajax_Loading').hide();
                                                // For Master Response
                                                if (response == 'login') {
									
									
                                                    $(".validateTips").hide();
                                                    $("#login_response").empty();
									
                                                    var login_response = '<div id="logged_in">'
                                                        + '<div style="width: 350px; float: left; margin-left: 70px;">'
                                                        + '<div style="width: 40px; float: left;">'
                                                        + '<img style="margin: 5px 5px 5px 0px;" src="resources/images/ajax-loader.gif">'
                                                        + '</div>'
                                                        + '<div style="margin: 5px 5px 5px 5px;width: 300px;color:#2A2A2A;font:18px Arial,Helvetica,sans-serif;">'
                                                        + "You are successfully logged in! <br /> Please wait while you're redirected...</div></div>";
	
                                                    $(".ui-widget-header").hide();									
                                                    $(".ui-dialog-buttonpane").hide();
									
                                                    $("#signInForm").dialog({
                                                        width : 500,
                                                        height : 220
                                                    });
											
                                                    $(this).html(login_response);
	
                                                    setTimeout('showPage()',3000);
                                                } else {
                                                    // For Invalid Authentication
                                                    var login_response = response;
                                                    $("#login_response").css("display","block");
                                                    $('#login_response').html(login_response);
                                                }
                                                return false;
                                            });
                                        }
                                    });
                                }
                            },
                            Cancel: function() {
                                $( this ).dialog( "close" );
                            }
                        },
                        close: function() {
                            allFields.val( "" ).removeClass( "ui-state-error" );
                        }
                    });          
		
                    $dialog.dialog('open');
                    return false;
                });
            });
            function showPage() {
                window.location = "${pageContext.request.contextPath}/rraHome/rraLogin";
            }
        </script>
    </head>
    <body>
        <div id="mian_body">
            <div class="main">
                <div class="header">
                    <div class="logo">
                        <img src="${pageContext.request.contextPath}/resources/images/rraLogoImg.jpg" width="100" height="67" alt="" />
                    </div>
                    <div class="menu_nav">
                        <ul>
                            <li class="active"><a href="${pageContext.request.contextPath}/rraHome">Home</a></li>
                            <li><a href="#">Tax Services</a></li>
                            <li><a href="#">Online Services</a></li>
                            <li><a href="#">About Us</a></li>
                            <li><a href="#" id="signInFormDiv">Sign In</a></li>

                        </ul>
                        <div class="clr"></div>
                    </div>

                    <div class="clr"></div>
                    <div class="hbg">
                        <img src="${pageContext.request.contextPath}/resources/images/header-about.png" width="972" height="200" alt="" style="border-radius: 20px 20px 20px 20px;" />
                    </div>
                </div>
                    <div id ="loginform">
                    </div>
                <div class="content">

                    <div id="signInForm" style="position: relative;display:none;">
                        <p class="validateTips">All fields are mandatory</p>                        
                        <span id="login_response"></span>
                        <div id="status" align="left">
                            <sf:form method="POST" modelAttribute="signInForm" action="" id="signForm">
                                <div class="signDiv">
                                    <label for="tags">UserName</label>
                                    <sf:input name="name" id="name" path="userId" size="30"/>
                                </div>    

                                <div class="signDiv">
                                    <label for="tags">Password</label>
                                    <sf:password name="password" id="password" path="password" value="" size="30"/>
                                </div>                             
                                <div style="position: relative; top: 20px;">
                                    <label for="tags"></label>   
                                    <div id="forgotPasswordlink" style="position: relative; left: 150px; width: 165px;"><a href="#">Forgot Password?</a></div> 
                                </div>

                                <div id="appHome_Ajax_Loading" style="display: none; position: relative; top: 30px;">
                                    <img align="absmiddle" src="resources/images/spinner.gif">&nbsp;Processing...
                                </div>

                            </sf:form>

                        </div>
                    </div>

                    <div class="content_bg">

                        <div class="mainbar">

                            <div class="article" style="width: 500px;height: 300px;">

                                <div class="clr"></div>
                            </div>
                        </div>

                        <div class="clr"></div>
                    </div>
                </div>
                <div class="clr"></div>
            </div>
            <div class="footer">
                <div class="footer_resize">
                    <p class="lf">&copy; Copyright <a href="#">MyWebSite</a>.</p>
                    <p class="rf">Layout by Cool <a href="#">Website Templates</a></p>
                    <div class="clr"></div>
                </div>
            </div>
        </div>
    </body>

</html>
